<template>
  <div class="spec-preview">
    <!-- high-url：放大镜对应的大图 -->
    <vue-photo-zoom-pro
      :out-zoomer="true"
      :width="200"
      :height="200"
      :high-url="imageUrl"
    >
      <!-- src：图片url -->
      <img class="zoom-img" :src="imageUrl" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
import VuePhotoZoomPro from 'vue-photo-zoom-pro'
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
export default {
  name: 'VZoom',
  components: {
    VuePhotoZoomPro
  },
  props: {
    imgUrl: String
  },
  // 需要通过data接收一下，不能直接在props上面更改
  // 父往子只能单向数据传递
  data() {
    return {
      imageUrl: this.imgUrl
    }
  },
  mounted() {
    this.eventBus.$on('sendImgUrl', (val) => {
      this.imageUrl = val
      // console.log(val)
    })
  }
}
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 400px;
    height: 400px;
  }
  .zoom-region {
    position: relative;
  }
  .out-zoomer {
    position: absolute;
    z-index: 99;
    top: 0 !important;
    right: -15px !important;
  }
  .selector {
    background-color: #cccccc50;
  }
}
</style>
